<template>
  <div class="overviewOfData">
    <el-card>
      <template #header>
        <div class="dataHeader">
          <div class="roundItem">
            <div class="round user">
              {{ data.increment_users }}
            </div>
            今日新增用户
          </div>
          <div class="roundItem">
            <div class="round user">
              {{ data.total_users }}
            </div>
            总用户量
          </div>
          <div class="roundItem">
            <div class="round question">
              {{ data.increment_questions }}
            </div>
            新增试题
          </div>
          <div class="roundItem">
            <div class="round question">
              {{ data.total_questions }}
            </div>
            总试题量
          </div>
          <div class="roundItem">
            <div class="round exerciseNum">
              {{ data.total_done_questions }}
            </div>
            总刷题量
          </div>
          <div class="roundItem">
            <div class="round exerciseNum">
              {{ data.personal_questions }}
            </div>
            人均刷题量
          </div>
        </div>
      </template>
      <div id="main" style="height: 600px" />
    </el-card>
  </div>
</template>

<script>
import { dataTitle, dataStatistics } from '@/api/dataCharts'
export default {
  data() {
    return {
      data: {
        total_done_questions: '--', //	int	刷题总数
        personal_questions: '--', //	int	人均刷题数量
        total_users: '--', //	int	用户总数
        increment_users: '--', //	int	今日增长用户数量
        increment_questions: '--', //	int	今日增加题数
        total_questions: '--' //	int	题总数
      },
      echartsData: []
    }
  },
  async created() {
    // 获取头部统计数据
    const res = await dataTitle()
    this.data = res.data
  },
  async mounted() {
    // 导入echarts资源包
    const echarts = require('echarts/lib/echarts')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/legend')
    require('echarts/lib/chart/pie')
    // 获取图标dom
    const chartDom = document.getElementById('main')
    const myChart = echarts.init(chartDom)
    // 获取echarts渲染数据
    const echartsRes = await dataStatistics()
    this.echartsData = echartsRes.data
    // const testData=[
    //         { value: 1, name: '传智播客' },
    //         { value: 6, name: '2' },
    //         { value: 2, name: '3' },
    //         { value: 1, name: '231' },
    //         { value: 1, name: '2' },
    //         { value: 1, name: 'sqiu' },
    //         { value: 1, name: '大幅度发' },
    //         { value: 9, name: 'asdadas' },
    //         { value: 2, name: '222' },
    //         { value: 1, name: '009' },
    //         { value: 1, name: '010' },
    //         { value: 2, name: '改了011' },
    //         { value: 2, name: '改了15' },
    //         { value: 1, name: 'e' },
    //         { value: 6, name: ' 传智播客' },
    //         { value: 1, name: 'a囧' },
    //         { value: 1, name: '6' },
    //         { value: 1, name: 'z' },
    //         { value: 1, name: 'n' },
    //         { value: 3, name: 'asdasd' },
    //         { value: 1, name: 'wg' },
    //         { value: 1, name: 'as' },
    //         { value: 2, name: 'asda' },
    //         { value: 1, name: '123213213' },
    //         { value: 9, name: '45' },
    //         { value: 1, name: '二万五二' },
    //         { value: 2, name: '4尔特人吧' },
    //         { value: 3, name: '啊飒飒的' },
    //         { value: 8, name: '1' },
    //         { value: 1, name: 'tyuiutyi' },
    //         { value: 3, name: 'ddfasfdasfd' },
    //         { value: 3, name: 'fsd' },
    //         { value: 4, name: 'sdfsd' },
    //         { value: 3, name: 'wdawd' },
    //         { value: 3, name: '1234' },
    //         { value: 1, name: '33' },
    //         { value: 16, name: '11' },
    //         { value: 1, name: 'a' },
    //         { value: 4, name: 'WEWEQW' },
    //         { value: 3, name: '5' },
    //         { value: 2, name: '43' },
    //         { value: 1, name: 'qzh' },
    //         { value: 1, name: '速冻' },
    //         { value: 1, name: '毒地' },
    //         { value: 4, name: '呜呜呜' },
    //         { value: 1, name: '1' },
    //         { value: 1, name: '东方一品' },
    //         { value: 2, name: '东方财富' },
    //         { value: 1, name: 'qqq' },
    //         { value: 1, name: 'sl' },
    //         { value: 2, name: '9' },
    //         { value: 1, name: 'o' },
    //         { value: 3, name: 'k' },
    //         { value: 2, name: '8' },
    //         { value: 3, name: '11111111' },
    //         { value: 1, name: '111' },
    //         { value: 2, name: '11111' },
    //         { value: 2, name: '实打实' },
    //         { value: 1, name: '12' },
    //         { value: 1, name: '刚一开一' },
    //         { value: 6, name: '222' }
    //       ]
    // 设置option
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: 'center',
        right: '10',
        orient: 'vertical'
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,

          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },

          data: this.echartsData
        }
      ]
    }

    option && myChart.setOption(option)
    window.onresize = function() {
      myChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.overviewOfData {
  margin: 10px 20px;
  .dataHeader {
    display: flex;
    justify-content: space-around;
    .roundItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      .round {
        margin-bottom: 11px;
        display: flex;
        width: 99px;
        height: 99px;
        border-radius: 50%;
        border: solid 2px #0086fa;
        justify-content: center;
        align-items: center;
      }
      .question {
        border: solid 2px #f76137;
      }
      .exerciseNum {
        border: solid 2px #55cd78;
      }
    }
  }
}
</style>
